<template>
  <!-- 签单 课程 -->
  <div class="page">
    <!-- button -->
    <div style="display: flex;margin-top: 12px;">
      <div
        @click="selectCorseHandle()"
        style="padding: 6px 12px;color: #007AFF;font-size: 14px;border: 1px solid #007AFF;border-radius: 4px;"
      >
        选择课程</div>
    </div>
    <!-- 课程信息 -->
    <div style="margin-top: 12px;">
      <div style="font-size: 14px;font-weight: bold;">课程信息</div>
      <div
        v-if="projects.length == 0"
        style="padding:40px 20px;text-align: center;font-size: 14px;background-color: #f5f5f5;"
      >暂无课程</div>
      <div
        v-else
        style="padding: 12px;border: 1px solid #ebebeb;margin-top: 12px;padding-top: 6px;"
        v-for="(item,idx) in projects"
      >
        <div style="display: flex;align-items: center;margin-top: 12px;">
          <div style="font-size:12px;color: #999999;min-width:40px">项目:</div>
          <div style="font-size:12px;margin-left: 12px;">{{item.projectName}}</div>
          <div style="font-size:12px;">(￥{{item.projectPrice}})</div>
        </div>
        <!-- course -->
        <div style="display: flex;align-items: center;margin-top: 5px;">
          <div style="font-size:12px;color: #999999;min-width:40px">课程2:</div>
          <div style="font-size:12px;margin-left: 12px;">英语</div>
          <div style="font-size:12px;color: #FF0000;margin-left: 5px;">￥12.00
          </div>
        </div>
        <div style="display: flex;align-items: center;margin-top: 5px;">
          <div style="font-size:12px;color: #999999;min-width:40px">课程2:</div>
          <div style="font-size:12px;margin-left: 12px;">化学</div>
          <div style="font-size:12px;color: #FF0000;margin-left: 5px;">￥12.00
          </div>
        </div>
      </div>

      <!-- 优惠 -->
      <div style="padding: 12px 0;">
        <div style="display: flex;">
          <div style="padding: 6px 12px;color: #007AFF;font-size: 14px;border: 1px solid #007AFF;border-radius: 4px;">
            选择优惠</div>
        </div>
        <!-- item -->
        <div style="padding: 12px;display: flex;align-items: center;margin-top: 12px;border: 1px solid #ebebeb;">
          <div style="font-size:12px;color: #999999;">项目:</div>
          <div style="font-size:12px;margin-left: 12px;">四川大学优惠</div>
          <div style="font-size:12px;">(￥12.00)</div>
        </div>
      </div>

      <!-- price -->
      <div style="display: flex;flex-direction: column;align-items: flex-end;">
        <div style="display: flex;margin-top: 5px;">
          <div style="margin-right: 5px;">课程总额:</div>
          <div style="color: #ff0000;">¥33.00</div>
        </div>
        <div style="display: flex;margin-top: 5px;">
          <div style="margin-right: 5px;">优惠金额:</div>
          <div style="color: #ff0000;">¥33.00</div>
        </div>
        <div style="display: flex;margin-top: 5px;">
          <div style="margin-right: 5px;">已付定金:</div>
          <div style="color: #ff0000;">¥33.00</div>
        </div>
        <div style="display: flex;margin-top: 5px;">
          <div style="margin-right: 5px;">应付金额:</div>
          <div style="color: #ff0000;">¥33.00</div>
        </div>
      </div>

      <!-- 特殊优惠 -->
      <div style="padding: 12px 0;">
        <div style="display: flex;">
          <van-checkbox
            style="flex: 1;"
            v-model="info.useSpe"
          >特殊优惠</van-checkbox>
          <van-field
            style="flex: 2;border: 1px solid #ebebeb;"
            v-if="info.useSpe"
            v-model="info.speNum"
            clearable
            placeholder="请输入特殊优惠金额"
          />
        </div>
      </div>

    </div>

  </div>
</template>

<script>
export default {
  props: ["info"],
  mounted() {
    let json = sessionStorage.getItem("selected-course");
    if (json != undefined) {
      let obj = {
        projectName: "测试001",
        projectPrice: "83.00",
        course: JSON.parse(json),
      };
      this.projects.push(obj);
    }
  },
  data() {
    return {
      projects: [
        // {
        //   projectName: "测试001",
        //   projectPrice: "83.00",
        //   course: [],
        // },
      ],
    };
  },
  methods: {
    //选择课程
    selectCorseHandle() {
      this.$router.push({
        // path: "/personinfo-selectcorse",
        path: "/personinfo-select-project",
      });
    },
  },
};
</script>


<style scoped>
</style>